import { Chart, MarkNode } from "@antv/g2";
export class Box5 {
    chart?: Chart;
    width: number;
    height: number
    mark?: MarkNode;
    constructor(width: string, height: string) {
        this.width = parseInt(width)
        this.height = parseInt(height)
    }
    init(id: string, title: string = '', range: string[] = ['#72cdd7', '#5087ec']) {
        const { width, height } = this
        this.chart = new Chart({
            container: document.getElementById(id) as HTMLElement,
            width, height,
            theme: 'classicDark'
        })
        this.chart.data([]).title({
            title, align: 'center'
        }).transform({ type: 'stackY' })
            .coordinate({ type: 'theta', outerRadius: 1, innerRadius: 0.55 })
            .legend('color', { position: 'left', itemLabelFill: '#fff', itemLabelFontSize: 16 })
        this.chart
            .interval()
            .encode('color', 'time')
            .encode('y', 'waiting')
            .encode('series', () => 'waiting')
            .animate('enter', { type: 'waveIn' })
            .animate('update', { type: 'waveIn' })
            .animate('exit', { type: 'waveIn' })
            .tooltip((data: { time: string, waiting: number }) => data.time.slice(2, 4) + ':' + data.waiting + '次')
        this.chart
            .interval()
            .encode('color', 'time')
            .encode('y', 'people')
            .encode('series', () => 'people')
            .style('radius', 6)
            .scale('y', { independent: true })
            .scale('color', {
                range,
            })
            .tooltip((data: { time: string, people: number }) => data.time.slice(2, 4) + ':' + data.people + '人')

        this.chart.render();
    }
    async changeData(data: any) {
        if (data.length === 0) {
            this.chart?.changeData([
                { time: '累计穿戴人次', waiting: 0, people: 20 },
                { time: '累计预警次数', waiting: 10, people: 0 },
                { time: '累计预警人次', waiting: 0, people: 10 },
            ])
        } else
            this.chart?.changeData(data)
    }
}